<template>
  <ElInput v-model="value">
    <template #append>
      <ElColorPicker style="width: 100%; height: 100%" v-model="value" :predefine="predefine" />
    </template>
  </ElInput>
</template>

<script setup lang="ts" name="InputColorPicker">
import { ElInput, ElColorPicker } from "element-plus";
import { computed } from "vue";
const props = defineProps({
  modelValue: {
    type: String
  },
  predefine: {
    type: Array,
    default: () => ["#409EFF", "#67C23A", "#E6A23C", "#F56C6C", "#909399", "#9B59B6", "#009688", "#800080"]
  }
});
const value = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  }
});
const emit = defineEmits(["update:modelValue"]);
</script>

<style lang="scss" scoped>
:deep(.el-input-group__append) {
  padding: 0;
}
</style>
